<template>
  <div class="footer"> 
    <ul>
      <li v-for="(value,index) of tarbarImg">
        <navigator  :url="value.url" class="navigate" open-type="switchTab">
          <img :src="value.imgSrc"/>
          <span>{{value.title}}</span>
        </navigator >
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tarbarImg:[
        {
          imgSrc:"http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/loveciy/img/tabBar/home.png",
          url:'/pages/home/main',
          title:"首页"
        },
        {
          imgSrc:"http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/loveciy/img/tabBar/classify.png",
          url:'/pages/classify/main',
          title:"商品"
        },
        {
          imgSrc:"http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/loveciy/img/tabBar/circle.png",
          url:'/pages/circle/main',
          title:"造物圈"
        },
        {
          imgSrc:"http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/loveciy/img/tabBar/plan.png",
          url:'/pages/plan/main',
          title:"脑洞计划"
        },
        {
          imgSrc:"http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/loveciy/img/tabBar/contact.png",
          url:'/pages/contact/main',
          title:"加入我们"
        },
      ]
    }
  },
}
</script>

<style scoped>
  .footer{height: 48.5px;width: 100%;background:#fff; position: fixed;left: 0;bottom: 0;border:0.1px solid #ccc;box-sizing:border-box;z-index: 200;}
  ul{display: flex;justify-content: row;}
  li{width: 20%;height: 50px;text-align:center;}
  li img{width: 28px;height: 28px;display: block;margin: 4px auto;}
  li span{width: 100%;height: 16px;display: block;line-height: 7px;font-size: 10px;color: #333333}
  .navigate{z-index: 99;}
</style>
